<template>
  <div>
    <div class="head">
      <div class="user">
        <span class="welcome">{{ timeText }}</span>
        ,
        <span class="user-name">{{
          userStore.userInfo.username || '游客'
        }}</span>
      </div>
      <div class="search-box">
        <form action="/">
          <van-search
            shape="round"
            v-model="value"
            placeholder="请输入搜索关键词"
            @search="methods.onSearch"
            :clearable="false"
          />
        </form>
      </div>
    </div>
    <div class="swi">
      <van-swipe class="my-swipe" autoplay="3000">
        <van-swipe-item
          v-for="(v, i) in bannerImgArr"
          :key="i"
          @click="methods.onGoShopMes(v)"
        >
          <img :src="v.image_url" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <p class="recommend">
      <span class="recommend-title">热卖推荐</span>
      <!-- <span
        class="recommend-title"
        :style="!tokenString ? 'background-color: #aaa' : ''"
        @click="goCollect"
      >
        我的收藏
      </span> -->
    </p>
    <!-- <ShopItem :datasource="datasource" :boxStyle="boxStyle">
      <template slot="hot">
        <div class="hot">hot</div>
      </template>
    </ShopItem> -->
    <div class="shop-box" :style="boxStyle">
      <div class="item" v-for="v in datasource" :key="v.id">
        <div class="img-box">
          <img :src="v.image_url" alt="" @click="methods.onGoShopMes(v)" />
        </div>
        <p class="pro-name">
          {{ v.name }}
        </p>
        <p class="pro-enname">
          {{ v.description }}
        </p>
        <p class="pro-price">￥{{ v.price }}</p>
        <div class="hot">hot</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue'
// import ShopItem from "../components/ShopItem.vue";
import { showFailToast } from 'vant'
import { CoffeeModel, GET } from '@/api'
import { useRouter } from 'vue-router'
import { HomePageBannerImgModel } from './model'
import { useUserStore } from '@/store'

const userStore = useUserStore()

let tokenString = sessionStorage.getItem('userToken')
const value = ref('')
const bannerImgArr = ref<HomePageBannerImgModel[]>([])

/** 数据源 */
const datasource = ref<Nullable<CoffeeModel[]>>(null)
const timeText = ref('')
const boxStyle = ref({
  justifyContent: 'space-between'
})
const router = useRouter()
const methods = {
  onSearch(val: string) {
    router.push({ name: 'Search', query: { name: val } })
  },
  getDatasource() {
    GET({
      url: '/recommendations'
    })
      .then((res) => {
        datasource.value = res.data.list
        datasource.value =
          datasource.value?.map((item) => {
            return {
              ...item,
              image_url: import.meta.env.VITE_APP_PROXY_URL + item.image_url
            }
          }) ?? []
        console.log(datasource.value, 'datasource')
      })
      .catch((err) => {
        console.error(err)
      })
  },
  getBannerImgArr() {
    GET({
      url: '/banner'
    })
      .then((res) => {
        bannerImgArr.value = res.data
        bannerImgArr.value = bannerImgArr.value.map((item) => {
          return {
            ...item,
            image_url: import.meta.env.VITE_APP_PROXY_URL + item.image_url
          }
        })
        console.log(bannerImgArr.value)
      })
      .catch((err) => {
        console.error(err)
      })
  },
  goCollect() {
    const token = tokenString
    if (!token) {
      showFailToast('请先登录')
    } else {
      router.push({ name: 'Collect' })
    }
  },
  onGoShopMes(v: any) {
    router.push({ name: 'ShopMes', query: { pid: v.id } })
  }
}

let timer: ReturnType<typeof setTimeout> | null = null
const getTime = () => {
  timer = setTimeout(getTime, 1000 * 60 * 60)
  const now = new Date().getHours()

  if (now >= 0 && now < 5) {
    timeText.value = '凌晨好'
  } else if (now >= 5 && now < 11) {
    timeText.value = '早上好'
  } else if (now >= 11 && now < 13) {
    timeText.value = '中午好'
  } else if (now >= 13 && now < 17) {
    timeText.value = '下午好'
  } else if (now >= 17 && now < 19) {
    timeText.value = '傍晚好'
  } else {
    timeText.value = '晚上好'
  }
}

onMounted(() => {
  tokenString = sessionStorage.getItem('userToken')
  methods.getBannerImgArr()
  methods.getDatasource()
  getTime()
})

onUnmounted(() => {
  if (timer) {
    clearTimeout(timer)
    timer = null
  }
})
</script>

<style lang="less" scoped>
.head {
  width: 100%;
  height: 42px;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  border-bottom: 1px solid #ddd;
  background-color: rgba(255, 255, 255, 0.7);
  .user {
    user-select: none;
    cursor: pointer;
    padding: 0 4px;
    font-weight: bold;
    // line-height: 42px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #777;
    .welcome {
      width: 50px;
      display: inline-block;
      text-align: center;
    }
    .user-name {
      color: rgb(12, 52, 186);
      display: inline-block;
      width: 60px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.swi {
  margin: 10px auto 0;
  background-color: transparent;
  height: 200px;
  box-sizing: border-box;
  .my-swipe {
    border-radius: 20px;
    overflow: hidden;
  }
  .my-swipe .van-swipe-item {
    text-align: center;
    padding: 0 20px;
    box-sizing: border-box;
    img {
      width: 100%;
      border-radius: 20px;
    }
  }
}

:deep(.van-search) {
  padding: 0;
  background-color: transparent;
}
.recommend {
  background-color: #fff;
  margin: 10px 20px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.recommend-title {
  padding: 10px 30px 10px 20px;
  color: #fff;
  font-size: 18px;
  border-top-right-radius: 20px;
  background-color: rgb(12, 52, 186);
  display: inline-block;
  // margin-left: 20px;
}
.hot {
  position: absolute;
  top: 10px;
  left: 30px;
  padding: 2px 4px 6px;
  background-color: rgb(12, 52, 186);
  text-align: center;
  color: #fff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.shop-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
  margin-bottom: 50px;
  overflow: hidden;
  // background-color: #fff;
  .item {
    width: calc(~'100% / 2 - 10px');
    text-align: center;
    padding: 10px 2px;
    font-size: 16px;
    margin-bottom: 10px;
    border-radius: 10px;
    background-color: #fff;
    position: relative;
    .pro-enname {
      font-size: 12px;
    }
    p {
      margin: 2px 0;
      text-align: left;
      padding-left: 10%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .img-box {
      width: 80%;
      margin: 0 auto;
      img {
        width: 100%;
      }
    }
    .pro-price {
      color: rgb(12, 52, 186);
      font-weight: bold;
    }
    .bottom-slot {
      width: 20px;
      height: 20px;
      background-image: url(../../assets/images/回收站.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: absolute;
      bottom: 10px;
      right: 10px;
      text-align: center;
      cursor: pointer;
    }
  }
}
</style>
